<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>爱奇异视频播放列表</title>
    <style>
        li {

            list-style: none;
            width: 210px;
            height: 380px;
            float: left;
            margin: 10px;
            padding: 5px;
            border-radius: 10px 10px 10px 10px;
        }

        img {
            border-radius: 10px 10px 10px 10px;
        }

        li:hover {
            border: gray 2px solid;
            box-shadow: -10px -10px 10px #b8b7b7;
        }

        p1 {
            font-size: 20px;
            color: gray;
            display: block
        }

        p2 {
            font-size: 16px;
            color: orangered;
            display: block
        }

        p3 {
            font-size: 12px;
            color: blue;
        }


    </style>
</head>
<body>
<h3>热播</h3>
<div id="main">
    <ul>
        <div>
            <li>
                <img src="../images/img1.png">
                <p1>神武赵子龙</p1>
                <p2>怒，林更新不抱网红抱女神</p2>
                <p3>点击次数：242445次</p3>
            </li>
        </div>

        <div>
            <li>
                <img src="../images/img2.png">
                <p1>旋风十一人</p1>
                <p2>胡歌变教练在撩前女友</p2>
                <p3>点击次数：242445次</p3>
            </li>
        </div>

        <div>
            <li>
                <img src="../images/img3.png">
                <p1>太阳的后裔</p1>
                <p2>宋慧乔吃嫩草</p2>
                <p3>点击次数：242445次</p3>
            </li>
        </div>

        <div>
            <li>
                <img src="../images/img4.png">
                <p1>山海经之赤影传说</p1>
                <p2>娜扎张翰再度联手</p2>
                <p3>点击次数：242445次</p3>
            </li>
        </div>
    </ul>
</div>
</body>

</body>
</html>